<template>
    <!-- 问题：max值是通过异步请求获取的，虽然我们终会获取到max,但是我们不知道什么时候能够拿到， 
        所以，我们可以通过watch属性监听，来监听父组件传递过来的max值，不管watch会被处罚几次，但是最后一次，肯定是一个合法的max值
    -->
    <div class="mui-numbox" data-numbox-min="1" style="height:25px">
      <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
      <input id="test" class="mui-input-numbox" type="number" :value="initcount"   @change="countChanged" ref="numbox" readonly/>
      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
</template>

<script>
//导入数字选择框
import mui from '../../lib/mui/js/mui.min.js';
export default {
    mounted(){
        //初始化数字选择框
        mui(".mui-numbox").numbox();
        //console.log(initcount);
    },
    methods:{
        countChanged(){
            //数据改变了
            //每当数量值改变，则把最新的数量值同步到store中，覆盖之前的数值
            this.$store.commit("updateGoodsInfo",{
                id:this.goodsid,
                count:this.$refs.numbox.value
            })
           /*  console.log({
                id:this.goodsid,
                count:this.$refs.numbox.value
            }); */
        }
    },
    props:['initcount','goodsid']
};
</script>

<style lang="scss" scoped>

</style>